<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			// 构造函数，创建一个监视对象
			function Observer(obj){
				// 获取被监视对象的属性列表
				const keys = Object.keys(obj);
				// 循环给当前创建的监视对象定义属性，代理被监视对象
				keys.forEach(key =>{
					Object.defineProperty(this,key,{
						get(){
							return obj[key];
						},
						set(value){
							console.log(`${key}的值改变了,变为${value}`);
							obj[key] = value;
						}
					})
				})
			}
			
			// 被监视对象
			let data = {
				name: '清华大学',
				address: '五道口'
			}
			//创建一个监视data的实例对象
			const obs = new Observer(data);
			
			// 创建一个vm 对象
			let vm = {};
			
			// 模拟vue，将监视data的对象赋值给data对象和vm的 _data 对象
			vm._data = data = obs;
			
		</script>
	</body>
</html>